<template>
	<view class="page-container">
		<!-- 顶部背景 -->
		<view class="header-bg">
			<image class="bg-image" src="../../static/assets/my-bg.png"></image>
			<view class="header-overlay"></view>
		</view>

		<!-- 用户信息卡片 -->
		<view class="user-card-container">
			<view class="user-card">
				<view class="user-info">
					<view class="avatar-container">
						<template v-if="userInfo && userInfo.avatar">
							<up-image
								:src="userInfo.avatar"
								width="120rpx"
								height="120rpx"
								shape="circle"
								mode="aspectFill"
							></up-image>
						</template>
						<template v-else>
							<view class="default-avatar">
								<up-icon name="account-fill" color="#FFFFFF" size="40"></up-icon>
							</view>
						</template>
						<view class="online-status" v-if="userInfo"></view>
					</view>
					<view class="user-details">
						<text class="user-name">{{userInfo ? userInfo.nickName : '未登录用户'}}</text>
						<text class="user-phone" v-if="userInfo">
							{{userInfo.phone.substring(0, 3)+"****" + userInfo.phone.substring(7)}}
						</text>
						<view class="user-tags" v-if="userInfo">
							<up-tag
								text="家长"
								type="primary"
								size="mini"
								bgColor="rgba(111, 215, 25, 0.1)"
								color="#6FD719"
								borderColor="transparent"
							></up-tag>
						</view>
					</view>
				</view>
				<view class="login-action" v-if="!userInfo">
					<up-button
						type="primary"
						size="small"
						@click="handlerLogin"
						customStyle="background: linear-gradient(135deg, #6FD719 0%, #5BC016 100%); border: none; border-radius: 20rpx;"
					>
						<text style="color: #fff; font-weight: 500;">登录/注册</text>
					</up-button>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-container">
			<view class="menu-header">
				<up-icon name="grid" color="#6FD719" size="20"></up-icon>
				<text class="menu-title">我的功能</text>
			</view>

			<view class="menu-grid">
				<view class="menu-item" @click="handlerMyCombo">
					<view class="menu-icon history-icon">
						<up-icon name="calendar" color="#fff" size="24"></up-icon>
					</view>
					<text class="menu-text">预约历史</text>
					<text class="menu-desc">查看用餐记录</text>
				</view>

				<view class="menu-item" @click="handlerBindStudent">
					<view class="menu-icon student-icon">
						<up-icon name="account" color="#fff" size="24"></up-icon>
					</view>
					<text class="menu-text">学生绑定</text>
					<text class="menu-desc">管理学生信息</text>
				</view>

				<view class="menu-item" @click="handelerUserInfoSetting">
					<view class="menu-icon setting-icon">
						<up-icon name="setting" color="#fff" size="24"></up-icon>
					</view>
					<text class="menu-text">资料设置</text>
					<text class="menu-desc">个人信息管理</text>
				</view>

				<view class="menu-item" v-if="userInfo" @click="handlerLogout">
					<view class="menu-icon logout-icon">
						<up-icon name="play-right" color="#fff" size="24"></up-icon>
					</view>
					<text class="menu-text">退出登录</text>
					<text class="menu-desc">安全退出账户</text>
				</view>
			</view>
		</view>

		<lqPrivacyDialog ref="privacyDialog"></lqPrivacyDialog>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		login
	} from '../../api/login.js'
	
	import lqPrivacyDialog from '../../components/lq-privacy-dialog/lq-privacy-dialog.vue';
	const userInfo = ref();
	const privacyDialog =ref();
	onMounted(() => {
		userInfo.value = uni.getStorageSync('userInfo')
	})

	onShow(() => {
		userInfo.value = uni.getStorageSync('userInfo')
	})

	const handlerLogout = () => {
		uni.showModal({
			title: '退出登录',
			content: '是否确认退出登录?',
			success(res) {
				if (res.confirm) {
					userInfo.value = null;
					uni.clearStorageSync('userInfo');
				}
			},

		})

	}

	const handlerMyCombo = () => {
		if (!userInfo.value) {
			uni.showModal({
				title: '登录提示',
				content: '您当前暂未登录，确认是否登录?',
				success(res) {
					if (res.confirm) {
						handlerLogin();
					}
				}
			})
			return;
		}
		uni.navigateTo({
			url: '/pages/userReserve/userReserve'
		})
	}

	const handlerBindStudent = () => {
		if (!userInfo.value) {
			uni.showModal({
				title: '登录提示',
				content: '您当前暂未登录，确认是否登录?',
				success(res) {
					if (res.confirm) {
						handlerLogin();
					}
				}
			})
			return;
		}
		uni.navigateTo({
			url: '/pages/studentBind/studentBind'
		})
	}

	const handlerLogin = () => {
		login((resp) => {
			userInfo.value = uni.getStorageSync('userInfo')
		})
	}

	const handelerUserInfoSetting = () => {
		if (!userInfo.value) {
			uni.showModal({
				title: '登录提示',
				content: '您当前暂未登录，确认是否登录?',
				success(res) {
					if (res.confirm) {
						handlerLogin();
					}
				}
			})
			return;
		}
		uni.navigateTo({
			url: '/pages/userInfo/userInfo'
		})
	}
</script>

<style lang="scss" scoped>
	.page-container {
		background: linear-gradient(180deg, #F8FAFB 0%, #FFFFFF 100%);
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	/* 顶部背景 */
	.header-bg {
		position: relative;
		height: 400rpx;
		overflow: hidden;
	}

	.bg-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.header-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: linear-gradient(to top, rgba(248, 250, 251, 0.8), transparent);
	}

	/* 用户信息卡片 */
	.user-card-container {
		padding: 0 30rpx;
		margin-top: -120rpx;
		position: relative;
		z-index: 10;
	}

	.user-card {
		background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFB 100%);
		border-radius: 30rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.8);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.user-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.avatar-container {
		position: relative;
		margin-right: 24rpx;
	}

	.default-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #6FD719 0%, #5BC016 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(111, 215, 25, 0.3);
		border: 3rpx solid #FFFFFF;
	}

	.online-status {
		position: absolute;
		bottom: 8rpx;
		right: 8rpx;
		width: 24rpx;
		height: 24rpx;
		background: #4CAF50;
		border-radius: 50%;
		border: 3rpx solid #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.user-details {
		flex: 1;
	}

	.user-name {
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 8rpx;
	}

	.user-phone {
		display: block;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
	}

	.user-tags {
		display: flex;
		gap: 10rpx;
	}

	.login-action {
		flex-shrink: 0;
	}

	/* 功能菜单 */
	.menu-container {
		padding: 40rpx 30rpx;
	}

	.menu-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 30rpx;
	}

	.menu-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.menu-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	.menu-item {
		background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 100%);
		border-radius: 25rpx;
		padding: 30rpx 24rpx;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.8);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		}
	}

	.menu-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

		&.history-icon {
			background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%);
		}

		&.student-icon {
			background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
		}

		&.setting-icon {
			background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
		}

		&.logout-icon {
			background: linear-gradient(135deg, #F44336 0%, #D32F2F 100%);
		}
	}

	.menu-text {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.menu-desc {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	/* 动画效果 */
	.user-card,
	.menu-item {
		animation: fadeInUp 0.6s ease-out;
	}

	.menu-item:nth-child(1) { animation-delay: 0.1s; }
	.menu-item:nth-child(2) { animation-delay: 0.2s; }
	.menu-item:nth-child(3) { animation-delay: 0.3s; }
	.menu-item:nth-child(4) { animation-delay: 0.4s; }

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 响应式设计 */
	@media screen and (max-width: 750rpx) {
		.user-card-container {
			padding: 0 20rpx;
			margin-top: -100rpx;
		}

		.user-card {
			padding: 30rpx 20rpx;
		}

		.menu-container {
			padding: 30rpx 20rpx;
		}

		.menu-item {
			padding: 24rpx 20rpx;
		}

		.menu-icon {
			width: 70rpx;
			height: 70rpx;
		}
	}
</style>